<template>
	<div class="minW1060-auto bg-fff mt10">
		<div class="pad20 ml10">

			<!--系统日志-->
			<el-row class="text-left">
				<el-col :span="18">

					<div class="dlblock-mb20">
						<span class="pr5 ml10">账号名称</span>
						<el-input v-model.trim="query.loginId" size="medium" placeholder="账号名称" style="width: 200px;"
							:maxlength="10" show-word-limit clearable></el-input>
					</div>

					<div class="dlblock-mb20">
						<span class="pr5 ml10">操作类型</span>
						<el-select v-model="query.op" style="width: 150px" clearable>
							<el-option label="全部" value=""></el-option>
							<el-option label="查询" value="0"></el-option>
							<el-option label="新增" value="1"></el-option>
							<el-option label="修改" value="2"></el-option>
							<el-option label="删除" value="3"></el-option>
						</el-select>
					</div>

					<div class="dlblock-mb20">
						<span class="pr5 ml10">操作时间</span>
						<el-date-picker v-model="creation" type="daterange" align="right" unlink-panels
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
						</el-date-picker>
					</div>

					<div class="dlblock-mb20 pr5 pl5">
						<el-button @click="pages.page = 1; queryLogs();" class="el-icon-search ml5" circle></el-button>
					</div>
				</el-col>

			</el-row>

			<!--表格-->
			<el-row>
				<el-table class="my-table" :data="logsList" stripe v-loading="loading"
					:header-row-class-name="'my-table-header'" @row-dblclick="choseRow($event)" ref="myTable" border>
					<el-table-column align="center" prop="id" label="ID" v-if="false"></el-table-column>
					<el-table-column align="center" prop="user" label="账号名称" width='180'></el-table-column>
					<el-table-column align="center" prop="ip" label="ip"></el-table-column>
					<el-table-column align="center" prop="type" label="操作类型"></el-table-column>
					<el-table-column align="center" prop="op" label="操作内容"></el-table-column>
					<el-table-column align="center" prop="date" label="时间"></el-table-column>

				</el-table>
				<div class="my-pagination">
					<el-pagination background layout="total, prev, pager, next" :total="pages.total" :current-page="pages.page" @current-change="pageChange">
					</el-pagination>
				</div>
			</el-row>

		</div>
	</div>
</template>

<script>
	import {
		getLogsInfo
	} from '@/api';

	export default {
		name: "index1",
		data() {
			return {
				//加载动画
				loading: false,

				//日志列表
				logsList: [],

				//查询参数
				query: {
					loginId: '',
					op: '',
					start: '',
					end: '',
					page: 1,
					size: 15,
					total: 0
				},
				pages: {
					page: 1,
					total: 0,
					size: 18
				},
				//日期
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				creation: []
			}
		},
		methods: {

			//查询日志
			queryLogs() {
				this.query.start = ''
				this.query.end = ''
				if (this.creation != undefined) {
					if (this.creation.length != 0) {
						this.query.start = this.creation[0]
						this.query.end = this.creation[1]
					}
				}
				this.loading = true
				getLogsInfo({
					pageNum: this.pages.page,
					start:this.query.start,
					end:this.query.end,
					op:this.query.op,
					loginId:this.query.loginId
				}).then(res => {
					console.log(res)
					if (res != null && res.code == 200) {
						this.logsList = res.data.list;
						this.query.total = res.data.count
					} else {
						this.$message.info(res.message)
					}
				}).finally(() => {
					this.loading = false
				})
			},

			// 分页查询
			pageChange(val) {
				this.pages.page = val
				this.queryLogs()
			},
		},
		created() {
			this.queryLogs()
		}
	}
</script>

<style>
	.bgc {
		background-color: #071C44;
	}
	.my-table /deep/ tr, .my-table /deep/ td{
		padding: 0 !important;
		height: 30px;
		line-height: 30px;
	}
</style>
